<template>
  <el-dialog title="请选择模板"
             :visible.sync="selectTemplateDialogVisible"
             width="80%" @close="closeDialog">
    <div class="table-container">
      <el-table :data="selectTemplateList"
                style="width: 100%;"
                v-loading="selectTemplateListLoading" border>
        <el-table-column label="表名" align="center" prop="tableName" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ allTableNameToDesc[scope.row.tableName] + "-" + scope.row.tableName }}
          </template>
        </el-table-column>
        <el-table-column label="备注信息" align="center" prop="remark" show-overflow-tooltip/>
        <el-table-column label="创建时间" align="center" prop="createTime"/>
        <el-table-column label="更新时间" align="center" prop="updateTime"/>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-upload
                v-if="selectTemplateListQuery.type == '0'"
                class="upload-demo"
                action=""
                :accept="'.xls, .xlsx'"
                :limit="1"
                :on-exceed="handleFileExceed"
                :before-upload="beforeFileUpload"
                :http-request="function(file){return handleSelectTemplateUpload(file,scope.row.id);}">
              <el-button size="small" type="primary">点击导入</el-button>
            </el-upload>
            <el-button size="mini" type="primary" @click="handleSelectTemplate(scope.row.id)"
                       v-if="selectTemplateListQuery.type == '1'">选择模板
            </el-button>
            <el-button size="mini" type="warning" @click="handleDownloadTemplate(scope.row.id)"
                       v-if="selectTemplateListQuery.type == '0'">下载模板
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog" size="small">取 消</el-button>
      </span>
  </el-dialog>
</template>

<script>
import {batchImportExportConfigDownload, batchImportExportConfigPostRequire} from '@/api/batchImportExportConfig'

export default {
  name: "batchImportExport",
  props: {
    tableName: {
      default: ""
    },
    visible: {
      default: false
    },
    type: {
      default: "0"
    },
    listQuery:{
      default: {}
    }
  },
  data() {
    return {
      selectTemplateList: [],
      selectTemplateListLoading: false,
      selectTemplateDialogVisible: false,
      selectTemplateListQuery: {
        current: 1,
        pageSize: 10,
        tableName: "",
        type: undefined,
      },
    }
  },
  watch:{
    visible(val){
      this.selectTemplateDialogVisible = val
      if(val){
        this.refresh()
      }
    },
    tableName(val){
      this.selectTemplateListQuery.tableName = val
    },
    type(val){
      this.selectTemplateListQuery.type =  val
    },
  },
  mounted() {
    this.selectTemplateListQuery.tableName = this.tableName
  },
  methods: {
    refresh(){
      this.getAllTableInfo()
      if(this.type == '1'){
        this.handleBatchExport()
      }else{
        this.handleBatchImport()
      }
    },
    closeDialog(){
      this.selectTemplateDialogVisible = false
      this.$emit('close')
    },
    beforeFileUpload(file) {
      const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isExcel) {
        this.$message.error('上传文件只能是 xls/xlsx 格式!');
      }
      if (!isLt5M) {
        this.$message.error('上传文件大小不能超过 5MB!');
      }
      return isExcel && isLt5M;
    },
    handleSelectTemplateUpload(file, importConfigId) {
      const that = this;
      let params = new FormData()
      params.append("xlsFile", file.file);
      params.append("importConfigId", importConfigId);
      let headers = {
        'Content-Type': 'multipart/form-data; name="xlsFile"'
      }
      that.$emit("requireByConfig",'batchImport',params,headers,(response)=>{
        if (response) {
          that.$message({
            message: response.message,
            type: response.status ? 'success' : 'error'
          })
        }
        that.closeDialog()
      })
    },
    handleFileExceed(){
      this.$message({
        message: "只能选择一个文件",
        type: 'error'
      })
    },
    handleBatchImport() {
      const that = this;
      this.selectTemplateListQuery.type = '0'
      this.selectTemplateListLoading = true
      this.selectTemplateDialogVisible = true
      this.selectTemplateList = []
      batchImportExportConfigPostRequire('listPage', this.selectTemplateListQuery).then(response => {
        if (response) {
          that.$message({
            message: response.message,
            type: response.status ? 'success' : 'error'
          })
        }
        that.selectTemplateListLoading = false
        that.selectTemplateList = response.data.records
      })
    },
    handleDownloadTemplate(configId) {
      batchImportExportConfigDownload("getImportExcel", {exportConfigId: configId}).then(response => {
        if (response) {
          this.$message({
            message: response.message,
            type: response.status ? 'success' : 'error'
          })
        }
      })
    },
    handleBatchExport() {
      const that = this;
      this.selectTemplateListQuery.type = '1'
      this.selectTemplateListLoading = true
      this.selectTemplateDialogVisible = true
      this.selectTemplateList = []
      batchImportExportConfigPostRequire('listPage', this.selectTemplateListQuery).then(response => {
        if (response) {
          that.$message({
            message: response.message,
            type: response.status ? 'success' : 'error'
          })
        }
        that.selectTemplateListLoading = false
        that.selectTemplateList = response.data.records
      })
    },
    handleSelectTemplate(configId) {
      const that = this;
      let thisListQuery = JSON.parse(JSON.stringify(this.listQuery));
      thisListQuery.exportConfigId = configId
      that.$emit("download","batchExport",thisListQuery)
    },
    getAllTableInfo() {
      const that = this;
      this.selectTemplateListLoading = true
      batchImportExportConfigPostRequire('getAllTableInfo').then(response => {
        that.selectTemplateListLoading = false
        that.allTableNameToDesc = response.data || {}
      })
    },
  }
}
</script>

<style scoped>

</style>
